---
title: Steps
description: Used to indicate progress through a multi-step process
links:
  source: components/steps
  storybook: components-steps--basic
  recipe: steps
  ark: https://ark-ui.com/react/docs/components/steps
---

<ExampleTabs name="steps-basic" />

## Usage

```tsx
import { Steps } from "@chakra-ui/react"
```

```tsx
<Steps.Root>
  <Steps.List>
    <Steps.Item>
      <Steps.Trigger>
        <Steps.Indicator />
        <Steps.Title />
        <Steps.Description />
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>
  <Steps.Content />
  <Steps.CompletedContent />
  <Steps.PrevTrigger />
  <Steps.NextTrigger />
</Steps.Root>
```

## Examples

### Sizes

Use the `size` prop to change the size of the steps component.

<ExampleTabs name="steps-with-sizes" />

### Variants

Use the `variant` prop to change the appearance of the steps component.

<ExampleTabs name="steps-with-variants" />

### Colors

Use the `colorPalette` prop to change the color scheme of the component.

<ExampleTabs name="steps-with-colors" />

### Trigger

Use the `Steps.Trigger` component to make the step clickable.

<ExampleTabs name="steps-with-trigger" />

### Vertical

Use the `orientation` prop to change the orientation of the steps component.

<ExampleTabs name="steps-vertical" />

### Controlled

Use the `step` and `onStepChange` props to control the current step of the steps
component.

<ExampleTabs name="steps-controlled" />

### Store

An alternative way to control the steps is to use the `RootProvider` component
and the `useSteps` store hook.

This way you can access the steps state and methods from outside the steps.

<ExampleTabs name="steps-with-store" />

### Icon

Pass the `icon` prop to the `StepsItem` component to display an icon.

<ExampleTabs name="steps-with-icon" />

### Description

Pass the `description` prop to the `StepsItem` component to display a
description.

<ExampleTabs name="steps-with-description" />

## Props

### Root

<PropTable component="Steps" part="Root" />
